/**
 * @description 解决echarts显示后没有自适应的bug
 * @author gf
 */
import React, { useEffect, useState } from 'react'

const useIoObserve = (dom: HTMLElement, callback: FrameRequestCallback, idName?:string) => {
  const [isChartView, setIsChartView] = useState(false)
  const io = new IntersectionObserver((e) => {
    setIsChartView(e[0].isIntersecting)
  }, {});
 
  useEffect(() => {
    if(idName) {
      io.observe(document.getElementById(idName))
    }
    else if (dom) {
      io.observe(dom)
    }
    if (isChartView && callback) {
      requestAnimationFrame(callback)
    }
  }, [isChartView, dom, idName])
  return isChartView
}

export default useIoObserve